<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box {
      height: 200px;
      width: 200px;
      background-color: #ff9dac;
    }

    .box1 {
      height: 100px;
      width: 100px;
      background-color: cadetblue;
    }

    .box2 {
      height: 50px;
      width: 50px;
      background-color: red;
    }
  </style>
</head>
<body>


<div id="app">
  <h1>count: {{ count }}</h1>
  <button v-on:click="count++">count++</button>
  <br>
  <button @click="greet">count++</button>
  <br>
  <button @click="jian($event, 3)">count--</button>
  <br>
  <a href="https://www.baidu.com/" @click.prevent="jian($event, 3)">count--</a>
  <br>
  <span>{{ calcCount }}</span>
  <div @contextmenu.prevent="box(111)" class="box">
    <div @click.stop="box(222)" class="box1">
      <div @click.stop.once="box(333)" class="box2"></div>
    </div>
  </div>
<!--  <input type="text" @input="handleChange">-->
  <input type="text" @keydown.enter="handleChange">
  <input type="text" @keydown.13.ctrl="handleChange">
</div>
<script src="vue.js"></script>
<script>

  const app = new Vue({
    data: {
      count: 0
    },
    computed: {
      calcCount() {
        return this.count * 100
      }
    },
    methods: {
      handleChange(event) {
        console.log(event)
      },
      box(num) {
        console.log(num)
      },
      greet(event) {
        // console.log(event)
        this.count += 1
      },
      jian(event, num) {
        // console.log(event)
        // console.log(num)
        // event.preventDefault()
        this.count -= 1
      }
    }
  }).$mount('#app')

</script>
</body>
</html>